<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>消息通知</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-content>.mui-table-view:first-child {
        margin-top: 1px;
      }
      
      .icon {
        width: 35px;
        vertical-align: middle;
        margin-right: 10px;
      }
      
      .mui-table-view-cell:after {
        left: 70px;
        height: 1px;
      }
      /* .mui-table-view-cell{
        padding: 11px 11px 11px 11px;
      } */
      
      .mui-table-view:after {
        left: 70px;
      }
      
      .mui-bar {
        background-color: #0082E6;
      }
      
      .lis {
        display: flex;
      }
      
      .lis .icon {
        width: 50px;
        height: 50px;
      }
      
      .des {
        margin: auto 0;
        flex: 1;
        overflow: hidden;
      }
      
      .des .time {
        float: right;
        color: #999999;
      }
      
      .mui-table-view-cell:after,
      .mui-table-view:after {
        right: 20px;
      }
    </style>
  </head>

  <body class="bg-white">
    <div id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
        <h1 class="mui-title">消息通知</h1>
      </header>

      <div id="refreshContainer" class="mui-scroll-wrapper mui-content bg-white">
        <div class="mui-scroll">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell lis" v-for="item in list" :key="item.id" @tap="detail(item)">
              <img :src="`./img/xiaoxitongzhi_icon${item.rs == 2? 1:2}.png`" class="icon">
              <div class="des">
                <div class="flex"><span class="mui-ellipsis flex-sub">{{item.tt}}</span><span class="time">{{item.ct}}</span></div>
                <p class="mui-ellipsis margin-top-xs">{{item.c}}</p>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <script src="../../../js/mui.min.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script type="text/javascript">
      mui.init({
        pullRefresh: {
          container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
          down: { //下拉刷新
            style: 'circle',
            height: 50, //可选,默认50.触发下拉刷新拖动距离,
            auto: false, //可选,默认false.首次加载自动下拉刷新一次
            contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              vm.form.page = 1;
              vm.getList();
              mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
              ////没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
            }
          },
          up: { //上拉加载
            height: 50, //可选.默认50.触发上拉加载拖动距离
            auto: false, //可选,默认false.自动上拉加载一次
            contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              vm.getList();
            }
          }
        }
      })

      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }
      function plusready() {
        var self = plus.webview.currentWebview();
        vm.getList()
      }

      let vm = new Vue({
        el: "#container",
        data: {
          form: {
            page: 1,
            size: 20,
            system: 'APP',
            status: 1
          },
          list: []
        },
        created: function() {},
        methods: {
          getList() {
            if(this.form.page == 1) { //第一页下拉
                plus.nativeUI.showWaiting('加载中')
              }
            mui.baseApp.httpRequst('get', '/app/api/notice', this.form, (data) => {
              let list = this.list
              if(this.form.page == 1) { //第一页下拉
                plus.nativeUI.closeWaiting()
                list = data.records
              } else {
                list = list.concat(data.records)
              }
              this.list = list
              this.form.page++
                if(data.records.length < this.form.size) {
                  mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
                  mui("#refreshContainer").pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
                } else {
                  mui("#refreshContainer").pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
                }
            })
          },
          detail(item) {
            // type 275系统通知  276 计划通知   277 工序退回通知  278技术交底确认通知  279生成通知单通知
            item.rs = 1
            if(item.type == 279) {
              mui.baseApp.openWindow('./remind.html', {
                itemId: item.id,
                type: item.t
              })
            } else {
              mui.baseApp.openWindow('./details.html', {
                itemId: item.id,
                type: item.t
              })
            }
          }
        },
      })
      var old_back = mui.back;
      mui.back = function() {
        //显示上一个界面；  
        var self = plus.webview.currentWebview();
        var opener = self.opener();
        //继续当前页面原有返回逻辑  
        mui.fire(opener, 'back', {});
        old_back()
      }
    </script>
  </body>

</html>